<template>
    <div>
        <footer>
            <router-link @click='test' v-for="item in list" :to="item.path" :key="item.index" exact>
                <span>
                    <img :src="item.path==$route.path?item.src:item.unsrc" alt="">
                </span>
                <p>{{item.title}}</p>
            </router-link>
        </footer>
    </div>
</template>
<script>
export default {
    data() {
        return {
            list: [
                {
                    title: '首页',
                    path: '/',
                    src: require('../assets/tabbar/tab_home_s.png'),
                    unsrc: require('../assets/tabbar/tab_home_n.png')
                },
                {
                    title: '交易',
                    path: '/tAdd1',
                    src: require('../assets/tabbar/tab_jiaoyi_s.png'),
                    unsrc: require('../assets/tabbar/tab_jiaoyi_n.png')
                },
                {
                    title: '自选',
                    path: '/optional',
                    src: require('../assets/tabbar/tab_zixuan_s.png'),
                    unsrc: require('../assets/tabbar/tab_zixuan_n.png')
                },
                {
                    title: '推广',
                    path: '/find',
                    src: require('../assets/tabbar/tab_promotion_s@2x.png'),
                    unsrc: require('../assets/tabbar/tab_promotion_n@2x.png')
                },
                {
                    title: '我的',
                    path: '/my',
                    src: require('../assets/tabbar/tab_mine_s.png'),
                    unsrc: require('../assets/tabbar/tab_mine_n.png')
                }
            ]
        }
    },
    methods:{
        test(){
            alert(1111)
        }
    }
}
</script>

<style lang="less" scoped>
@actColor: #fffc24;
@Color: #56627c;
@fsize: 0.2667rem;
@hwrap: 1.30667rem;
div,
footer {
    width: 100%;
    height: @hwrap;
    position: absolute;
    bottom: 0;
    font-size: @fsize;
    display: flex;
    background-color: #000000;
    span {
        display: block;
        text-align: center;
        img{
            width: 0.586rem;
        }
    }
    p{
        text-align: center;
    }
    a {
        width: 25%;
        color: @Color;
        text-decoration: none;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .router-link-active {
        color: @actColor;
    }
}
</style>
